{% extends "base.html" %} {% block head %} {{ super() }}
<script src="{{url_for('static', filename='../static/js/ztable.js')}}" type="text/javascript" charset="utf-8"></script>

<script>
	$(document).ready(function(){
		//$('div.left-side-content').hide();
		function select_row($row){
			//company_name = $row.find('td[name="name"]').attr('value');
			//$("#manage-menu-btn").attr('href','/manage_items/' + company_name);
		}
	
		var $ItemTable = $('#item-list').ZTable();
		
		
		function insert_row(item){
			pic_fpath = item['pic_fpath'].replace(/\s/g,"%20")
			row = '<tr><td><img src="'+ pic_fpath +'"></td>' +
				'<td name="name">' + item['name'] + ' ' + item['description'] + '</td>' +
				'<td name="price">' + item['price'] + '</td>' +
				'<td><a href="/add_to_cart/'+ item['iid'] +'" class="btn btn-default">Order</a></td></tr>';
				$ItemTable.append_row(row);
		}
		
		function select_company($Row){
			//$Row.
			$.post('/get_items', { company_name: $Row.find('td[name="name"]').attr('value')}).done(
					function(data){
						$ItemTable.clear();
						items = $.parseJSON(data.items)
						for(var i=0; i<items.length; i++){
							insert_row(items[i]);
						}
    					//$Uploader.find('.z-frame-' + id).find('div').css("background-image","url("+ escape(data.fpath)+")");
    					//$Uploader.find('.z-frame-' + id).find('div').css("background-size", "108px 108px");
    					//object_id = data.oid;
    					//settings.preload_done(data.fname, object_id);
					});
		}
		
		var $CompanyTable = $('#company-list').ZTable({
			select_row_cb: select_company 
		});		
		//$('div.right-side-bar').hide();
	});
	</script>
{% endblock %} {% block jumbotron %}
<div class="jumbotron">
	<div class="container">
		<h3>{{'London Community'}}</h3>
		<p>{{'Welcome to London Community !'}}</p>
		<p>
			<a href="/signup" class="btn btn-lg btn-primary">{{'Sign Up'}}</a>
		</p>
	</div>
</div>
{% endblock %}


{% block left_area %}
	{{ super() }}
	<div class="left-side-content">
		<table id="company-list" class="table" mode="normal" style="height: 200px; overflow: auto;">
			<tbody>
				{% if companies !=[] %}
					{% for company in companies %}
						<tr>
							<td name="name" value="{{company['name']}}">{{company['name']}} {{company['street']}}</td>
						</tr>
					{% endfor %}
				{% endif %}
			</tbody>
		</table>
	</div>

{% endblock %}

{% block content %}
<div class="container">
	<div class="col-xs-12 col-sm-9">
					<table id="item-list" class="table" mode="normal"
						style="height: 200px; overflow: auto;">
						<tbody>
							{% if items !=[] %}
								{% for item in items %}
									<tr>
										<td><img src="{{ item['pic_fpath']|replace(' ','%20') }}"></td>
										<td name="name">{{item['name']}} {{item['description']}}</td>
										<td name="price">${{item['price']}}</td>
										<td><a href="/add_to_cart/{{ item['iid']}}" class="btn btn-default">{{'Order'}}</a></td>
									</tr>
								{% endfor %}
							{% endif %}
						</tbody>
					</table>
	</div>
	<!--/span-->
</div>
{% endblock %}

{% block right_area %}
	<div class="right-side-area col-md-2">
		hello right
	</div>
{% endblock %}